<template>
  <headerNav></headerNav>
  <!-- 课程详情页 -->
  <div class="courseDetail display-flex">
    <div class="courseDetail-left courseDetail-height">
      <div
        class="font-size-18 color-00085 font-weight-600 margin-bottom-16 display-flex flex-between"
      >
        <div class="w-100 display-flex flex-between align-items-center">
          <div>PPT</div>
        </div>
      </div>
      <div
        ref="pptRef"
        class="ppt-content"
        :class="playStatus == 0 ? 'pptRecordHeight' : 'pptLiveHeight'"
      >
        <!-- 录播ppt列表 -->
        <div>
          <div
            :ref="
              (el) => {
                if (el) pptItems[index] = el
              }
            "
            class="pptList cursor-pointer"
            :class="getActiveClass(index)"
            v-for="(item, index) in pptList"
            :key="index"
            @click="handlePpt(item.timestamp, index)"
          >
            <img class="w-100 h-100 pptImg" :src="item.url" alt="" />
            <div class="num text-center font-size-14 color-fff">
              {{ index + 1 }}
            </div>
            <div class="time text-center color-fff font-size-14">
              {{ convertTimes(item.timestamp) }}
            </div>
            <img
              class="pptDel cursor-pointer"
              :src="selectPpt == index ? activePptDel : pptDel"
              @click.stop="deletePpt(item.folderUrl, index)"
              alt=""
            />
          </div>
        </div>
      </div>
      <p
        v-if="playStatus == 1"
        class="font-size-14 color-0F63ED font-weight-500 margin-top-8"
      >
        正在同步...
      </p>
    </div>
    <div class="courseDetail-center bg-fff">
      <div
        class="courseDetail-top display-flex flex-between align-items-center"
      >
        <div class="right-className">
          <!-- <img
            class="course-marker"
            src="@/assets/images/courseMarker.png"
            alt=""
          /> -->
          <p class="course-name font-weight-600">
            {{ detailData?.kcmc }}
          </p>
          <div
            class="roomMix text-center color-0F63ED font-size-12"
            v-if="detailData?.hasMixed"
          >
            MIX
          </div>
          <div
            v-if="detailData?.audioCnt == 3"
            class="audioNum text-center color-fff font-size-12 margin-left-8"
          >
            三路声音
          </div>
        </div>
        <div
          class="font-size-14 cursor-pointer"
          @click="handleKnowledgePoint"
          v-if="playStatus == 0 && knowsPoint"
        >
          <img
            class="icon-size-16"
            src="@/assets/images/ic_knowledgepoint.png"
            alt=""
          />
          <span class="color-00085" style="margin-left: 3px">知识点：</span>
          <span class="color-0F63ED">{{ knowsPoint?.name }}</span>
        </div>
      </div>
      <!-- 课程视频部分 -->
      <div class="center-video-box">
        <div class="video-content">
          <div class="video-box w-100">
            <div
              class="video-top w-100 display-flex flex-end align-items-center"
            >
              <div class="picture-quality">
                <el-button
                  class="capturePicture cursor-pointer color-fff"
                  v-if="playStatus == 0"
                  @click="handleCapturePicture"
                  >抓图</el-button
                >
                <el-button
                  class="cursor-pointer btn no-hover"
                  @click="handleToggle(index)"
                  v-for="(item, index) in videoTypeList"
                  :class="currentBtn == index ? ['bg-0F63ED', 'color-fff'] : ''"
                  :key="index"
                  >{{ item.name }}</el-button
                >
              </div>
            </div>
            <div class="video-center" :class="playStatus == 1 ? 'live' : ''">
              <video
                class="w-100 h-100"
                autoplay
                controls
                @play="onPlay"
                @pause="onPause"
                @seeking="onSeeking"
                @seeked="onSeeking"
                @timeupdate="handleTimeUpdate"
                ref="pptVideoRef"
              ></video>
            </div>
            <div class="display-flex margin-top-20">
              <span
                v-if="playStatus == 0"
                class="chapter color-00085 font-size-16 font-weight-600"
                >第
                {{ detailData?.xueshi }}
                学时
                <span>{{ detailData?.title }}</span>
              </span>
              <span
                v-if="playStatus == 1"
                class="chapter color-00085 font-size-16 font-weight-600"
                >第
                {{ detailData?.xueshi }}
                学时
                <span>{{ detailData?.kcmc }}</span>
                <span>-直播中...</span>
              </span>
              <div
                class="liveStatus text-center font-size-12 color-fff"
                v-if="playStatus == 1"
              >
                直播中
              </div>
              <div
                class="liveOver text-center font-size-12 color-00065"
                v-if="playStatus == 0"
              >
                已结束
              </div>
              <div
                v-if="detailData?.isYjs == 0"
                class="studentGrade undergraduate font-size-12 text-center margin-left-16"
              >
                本科生
              </div>
              <div
                v-if="detailData?.isYjs == 1"
                class="studentGrade GraduateStudent font-size-12 text-center margin-left-16"
              >
                研究生
              </div>
            </div>
            <!-- 课堂实况 -->
            <div class="display-flex margin-top-20 flex-between">
              <div class="display-flex align-items-center">
                <span
                  class="margin-right-16 color-00085 font-size-14 font-weight-600"
                  >课堂实况:</span
                >
                <div class="detailIcon">
                  <img
                    class="classIcon"
                    src="../../assets/images/classroom.png"
                    alt=""
                  />
                  <span class="classIcon-name vertical-align-middle">{{
                    detailData?.classRoomName
                  }}</span>
                </div>
                <div class="detailIcon">
                  <img
                    class="classIcon"
                    src="../../assets/images/teacher.png"
                    alt=""
                  />
                  <span class="classIcon-name">{{ detailData?.ghNames }}</span>
                </div>
                <div class="detailIcon">
                  <img
                    class="classIcon"
                    src="../../assets/images/class.png"
                    alt=""
                  />
                  <span class="classIcon-name">{{
                    detailData?.bh ? detailData.bh.replace(/；+$/, '') : ''
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="courseDetail-right courseDetail-height">
      <!-- 视频切换 -->
      <div class="videoToggle">
        <p
          class="videoToggle-titletitle color-00085 font-weight-600 font-size-18"
        >
          视频切换
        </p>
        <!-- 视频切换 -->
        <div>
          <!-- 后置摄像头 -->
          <div class="videoList w-100 h-100">
            <video
              ref="afterVideoRef"
              class="w-100 h-100"
              autoplay
              muted
            ></video>
            <div class="videoList-top w-100">
              <div class="display-flex flex-between">
                <div>
                  <img
                    class="videoToggle-icon cursor-pointer"
                    src="@/assets/images/ic_switch.png"
                    alt=""
                    @click="toptoggleVideo"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="questionsCourse">
        <p
          class="videoToggle-titletitle color-00045 font-weight-600 font-size-18"
        >
          <span
            @click="handleTitle(index)"
            style="margin-right: 24px"
            class="cursor-pointer noteToggle"
            v-for="(item, index) in rightToggle"
            :key="index"
            :class="toggleIndex == item.index ? 'color-00085 activeToggle' : ''"
            >{{ item.title }}</span
          >
        </p>
        <div v-if="toggleIndex == 0" class="questionsBox">
          <!-- <div
            class="ai-questions w-100 color-00085 font-weight-500 font-size-14"
          >
            松树林中天牛病虫害的防治方法的视频
          </div> -->
        </div>
        <div v-if="toggleIndex == 1" class="titleBox">
          <div
            class="title-item cursor-pointer"
            v-for="(item, index) in answerList"
            :key="index"
            :class="titleIndices.includes(index) ? 'active-border' : ''"
          >
            <div class="display-flex flex-between">
              <div
                :class="
                  titleIndices.includes(index) ? 'color-0F63ED' : 'color-00085'
                "
              >
                <p>
                  <span class="font-size-14 font-weight-500"
                    >题目{{ index + 1 }}</span
                  >
                  <span
                    class="title-type font-size-12"
                    :class="{
                      'single-choice': item.type == 1,
                      'more-choice': item.type == 2,
                      'fill-choice': item.type == 3,
                      'question-choice': item.type == 4
                    }"
                    >{{
                      item.type == 1
                        ? '单选题'
                        : item.type == 2
                          ? '多选题'
                          : item.type == 3
                            ? '填空题'
                            : item.type == 4
                              ? '问答题'
                              : ''
                    }}</span
                  >
                </p>
                <p
                  class="font-size-14 font-weight-500"
                  style="margin-bottom: 10px"
                >
                  {{ item.question }}
                </p>
              </div>
              <div>
                <div
                  :class="
                    titleIndices.includes(index) ? 'active-up' : 'item-up'
                  "
                  v-if="titleIndices.includes(index)"
                  class="icon-size-16"
                  @click.stop="handleTitleDown(index)"
                ></div>
                <div
                  v-else
                  class="icon-size-16 item-down"
                  @click.stop="handleTitleDown(index)"
                ></div>
              </div>
            </div>
            <div
              class="corepointsDetail font-size-14 color-00085"
              v-if="titleIndices.includes(index)"
            >
              <div>
                <!-- 单选题 -->
                <div class="topicList" v-if="item.type == '1'">
                  <div
                    class="isanswerList display-flex"
                    v-for="(answerItem, answerIndex) in item.options"
                    :key="answerIndex"
                  >
                    <span
                      class="answerNum border-radius text-center font-size-14 color-000 bg-fff"
                      :class="{
                        rightNum: item.answers[0] == answerItem.label
                      }"
                      >{{ answerItem.label }}</span
                    >
                    <div
                      class="font-size-14 color-00085"
                      style="line-height: 22px; width: calc(100% - 36px)"
                      v-html="answerItem.value"
                    ></div>
                  </div>
                  <div class="answer-item">
                    <div class="topicList-bottom">
                      <div class="answer-box">
                        <div
                          class="font-size-14 font-weight-500 margin-bottom-16"
                        >
                          <span class="color-00085">正确答案：</span>
                          <span class="correctAnswer">{{
                            item.answers[0]
                          }}</span>
                        </div>
                        <!-- 解析 -->
                        <div class="analyze font-size-16">
                          <p class="analyzeName font-weight-500">解析：</p>
                          <div class="color-00085 analyze-text">
                            {{ item.analysis }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 多选题 -->
                <div class="topicList" v-if="item.type == '2'">
                  <div
                    class="isanswerList display-flex"
                    v-for="(answerItem, answerIndex) in item.options"
                    :key="answerIndex"
                  >
                    <div
                      class="answerNum moreNum text-center font-size-14 color-00085 margin-top-8"
                      :class="{
                        rightNum: item.answers.includes(answerItem.label)
                      }"
                    >
                      {{ answerItem.label }}
                    </div>
                    <div
                      class="font-size-14 color-00085"
                      style="line-height: 28px; width: calc(100% - 36px)"
                      v-html="answerItem.value"
                    ></div>
                  </div>
                  <div class="answer-item">
                    <div class="topicList-bottom">
                      <div class="answer-box">
                        <div class="font-size-16 margin-bottom-16">
                          <span class="">正确答案：</span>
                          <span class="correctAnswer">{{
                            item.answers.join(' ')
                          }}</span>
                        </div>
                        <!-- 解析 -->
                        <div class="analyze">
                          <p class="analyzeName font-weight-500">解析：</p>
                          <div class="color-00085 analyze-text">
                            {{ item.analysis }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 填空题 -->
                <div class="topicList" v-if="item.type == '3'">
                  <div class="answer-item">
                    <div class="topicList-bottom">
                      <div class="answer-box">
                        <div class="font-size-16 margin-bottom-16">
                          <span class="">正确答案：</span>
                          <span class="correctAnswer">{{
                            item.answers.join('、')
                          }}</span>
                        </div>
                        <!-- 解析 -->
                        <div class="analyze">
                          <p class="analyzeName">解析：</p>
                          <div class="color-00085 analyze-text">
                            {{ item.analysis }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 问答题 -->
                <div class="topicList" v-if="item.type == '4'">
                  <div class="answer-item">
                    <div class="topicList-bottom">
                      <div class="answer-box">
                        <div class="font-size-16 margin-bottom-16">
                          <span class="">参考答案：</span>
                          <span class="correctAnswer">{{
                            item.answers[0]
                          }}</span>
                        </div>
                        <!-- 解析 -->
                        <div class="analyze">
                          <p class="analyzeName">解析：</p>
                          <div class="color-00085 analyze-text">
                            {{ item.analysis }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 知识点弹窗 -->
    <knowledgeDialog
      :showknowledge="showknowledge"
      @closeknowledgeDialog="closeknowledgeDialog"
      :knowledgeDetail="knowledgeDetail"
    />
    <!-- AI助手 -->
    <div v-if="openAi" class="big-bg"></div>
    <div
      v-else
      class="ai-content cursor-pointer display-none"
      @click="handleOpenAi"
    ></div>
    <div v-if="openAi" class="ai-box h-100 bg-fff">
      <!-- ai顶部 -->
      <div class="ai-top">
        <!-- 新对话 -->
        <div
          v-if="!isHistory"
          class="color-00085 display-flex flex-between align-items-center"
        >
          <div class="font-size-20 font-weight-600 color-00085">AI助手</div>
          <div class="display-flex">
            <div class="cursor-pointer" @click="handleHistory">
              <img
                class="icon-size-22"
                src="@/assets/images/ic_lsdh.png"
                alt=""
              />
              <span
                class="margin-left-6 margin-right-20 font-size-14 color-00085"
                >历史对话</span
              >
            </div>
            <div class="margin-right-12 cursor-pointer">
              <img
                class="icon-size-22"
                src="@/assets/images/ic_xdh.png"
                alt=""
              />
              <span class="margin-left-6 font-size-14 color-00085">新对话</span>
            </div>
            <img
              class="icon-size-24 cursor-pointer"
              src="@/assets/images/interactive.png"
              alt=""
              @click="handlecloseAi"
            />
          </div>
        </div>
        <!-- 历史对话 -->
        <div v-else class="display-flex flex-between">
          <img
            class="icon-size-24 cursor-pointer"
            src="@/assets/images/arrow-left.png"
            alt=""
            @click="handleHistory"
          />
          <div class="font-size-20 font-weight-600 color-00085">历史对话</div>
          <img
            class="icon-size-24 cursor-pointer"
            src="@/assets/images/interactive.png"
            alt=""
            @click="handlecloseAi"
          />
        </div>
      </div>
      <div class="dialogueBox">
        <!-- 新对话ai内容 -->
        <div v-if="!isHistory">
          <div class="dialogueTop">
            <p class="font-size-18 font-weight-500">Hi, 我是浙农林AI助手</p>
            <p class="font-size-14" style="margin-top: 5px">
              可以试着问我问题～
            </p>
            <img class="ai-bg h-100" src="@/assets/images/voiceBg.png" alt="" />
          </div>
          <!-- 会话内容 -->
          <div class="message-content w-100">
            <div class="display-flex">
              <img class="ai-img" src="@/assets/images/ai.png" alt="" />
              <div>
                <!-- <p class="font-size-12" style="margin-left: 10px">智能</p> -->
                <div class="message bg-fff font-size-14 color-00085">
                  你好呀！我是浙农林 AI 助手，有什么问题我可以帮助你解答呢？
                  <!-- <img
                  class="messageCopy cursor-pointer"
                  src="@/assets/images/copy.png"
                  alt=""
                /> -->
                </div>
              </div>
            </div>
            <div class="display-flex flex-end">
              <div>
                <div class="send-message message color-fff bg-0F63ED">
                  在吗？
                  <!-- <img
                  class="messageCopy cursor-pointer"
                  src="@/assets/images/copy.png"
                  alt=""
                /> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 历史对话内容 -->
        <div v-else>
          <div>
            <p class="font-size-13 font-weight-600 color-00085">今天</p>
            <p class="line-height-38 cursor-pointer historyList w-100">
              生物化学D的相关课程
              <img
                class="icon-size-24 historyDel"
                src="@/assets/images/pptDelete.png"
                alt=""
              />
            </p>
            <p class="line-height-38 cursor-pointer historyList w-100">
              如何通过植物选择和群落配置实现重金属污染的生物富集与降解 2
              <img
                class="icon-size-24 historyDel"
                src="@/assets/images/pptDelete.png"
                alt=""
              />
            </p>
          </div>
          <div>
            <p class="font-size-13 font-weight-600 color-00085">2025-02</p>
            <p class="line-height-38 cursor-pointer historyList w-100">
              如何通过植物选择和群落配置实现重金属污染的生物富集与降解 2
              <img
                class="icon-size-24 historyDel"
                src="@/assets/images/pptDelete.png"
                alt=""
              />
            </p>
          </div>
        </div>
      </div>
      <!-- 发送消息 -->
      <div class="ai-bottom w-100">
        <div class="display-flex">
          <div
            @click="handleSelectOne"
            class="ai-type-r1 display-flex align-items-center cursor-pointer"
            :class="
              selectAiType == 0
                ? 'active-r1 color-fff bg-0F63ED'
                : 'ai-type-nor'
            "
          >
            <div class="ai-type-one icon-size-16"></div>
            <span
              class="font-size-14"
              :class="selectAiType == 0 ? 'color-fff' : 'color-0F63ED'"
              >DeepSeek-R1</span
            >
          </div>
          <div
            @click="handleSelectTwo"
            class="ai-type display-flex align-items-center cursor-pointer margin-left-8"
            :class="
              selectAiType == 1 ? 'active-two bg-0F63ED' : 'ai-type-two bg-fff'
            "
          >
            <div class="ai-type-two icon-size-16"></div>
            <span
              class="font-size-14"
              :class="selectAiType == 1 ? 'color-fff' : 'color-00085'"
              >本地知识库</span
            >
          </div>
          <div
            @click="handleSelectThree"
            class="ai-type display-flex align-items-center cursor-pointer margin-left-8"
            :class="
              selectAiType == 2
                ? 'active-three bg-0F63ED'
                : 'ai-type-three bg-fff'
            "
          >
            <div class="ai-type-three icon-size-16"></div>
            <span
              class="font-size-14"
              :class="selectAiType == 2 ? 'color-fff' : 'color-00085'"
              >网络搜索</span
            >
          </div>
        </div>
        <div class="send-box bg-fff w-100 display-flex align-items-center">
          <el-input
            v-model="aiMessage"
            class="send-input h-100"
            placeholder="请输入想问的问题"
          ></el-input>
          <div
            class="sendIcon icon-size-24 cursor-pointer"
            :class="aiMessage?.trim() ? 'active-sead' : ''"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import pptDel from '@/assets/images/pptDelete.png'
import activePptDel from '@/assets/images/activeDel.png'
import {
  getVideoList,
  getcourseDetail,
  getKeypoint,
  getPpt,
  getCoursePlay,
  getCapturePicture,
  delPpt,
  saveRecord
} from '@/services/liveBroadcast'
import Hls from 'hls.js'
import { ref, onMounted, watch, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { convertTimes } from '@/utils/crypto'
import { getRecordVideoList, getTopic } from '@/services/recordedBroadcast'
import { useUserStore } from '@/stores/modules/user'
import { timeToSeconds } from '@/utils/crypto'
import knowledgeDialog from './components/knowledgeDialog.vue'
const userStore = useUserStore()
const route = useRoute()
const knowledgeDetail = reactive({
  name: '',
  startTime: '',
  endTime: '',
  memo: ''
}) // 知识点弹窗
// 课程直播状态
const playStatus = ref()
// 获取路由对象
const detailData: any = ref()
const openAi = ref(false)
// 简介
// 视频切换HD、SD数据
const currentBtn = ref(0)
const videoTypeList = ref([
  {
    index: 0,
    name: '默认'
  },
  {
    index: 1,
    name: 'HD'
  },
  {
    index: 2,
    name: 'SD'
  }
])
const pptVideoTime = ref(0) // 录播ppt时时播放时间
// 知识点
const showknowledge = ref(false) // 知识点弹窗
const knowledgekList = ref()
const messageList = ref() // 过滤后的文稿列表
const allmessageList = ref() // 所有的文稿列表
const knowsPoint = ref() // 录播知识点
const toggleIndex = ref(1)
const keyContentList: any = ref([])
const difficultContentList: any = ref([])
const pptList: any = ref([])
const pptTbTime = ref()
const pptItems: any = ref<(HTMLDivElement | null)[]>([])
const pptRef = ref<HTMLDivElement | null>(null) // ppt-content 容器引用
let aiscript: any = null
const selectPpt: any = ref() // 选中的ppt
const rightToggle = ref([
  // {
  //   index: 0,
  //   title: 'AI提问'
  // },
  {
    index: 1,
    title: '相关题目'
  }
])
// ppt视频地址（主画面路径）
const pptVideoRef = ref<HTMLMediaElement | null | any>(null)
const pptUrls = ref({
  defalutUrl: '', // 默认/高清
  hdUrl: '', // 默认/高清
  sdUrl: '', // 标清
  enableAudio: true // 是否有声音
})
// 后置摄像头视频地址
const afterVideoRef: any = ref<HTMLMediaElement | null>(null)
const afterUrls = ref({
  defalutUrl: '', // 默认/标清
  hdUrl: '', // 默认/标清
  sdUrl: '', // 高清
  enableAudio: true // 是否有声音
})
// 前置摄像头视频地址
// const beforeUrls = ref({
//   defalutUrl: '', // 默认/标清
//   hdUrl: '', // 默认/标清
//   sdUrl: '', // 高清
//   enableAudio: true // 是否有声音
// })
// 中间视频播放的事件
const centerVideoCurrentTime = ref()
const beforeVideoRef: any = ref<HTMLMediaElement | null>(null)
const centerUrls = ref({
  defalutUrl: '', // 默认
  hdUrl: '', // 高清
  sdUrl: '', // 标清
  enableAudio: true // 是否有声音
}) // 主画面展示视频默认url
// const centerVedioUrl = ref(
//   'https://zlm-01.250.etianmu.com/101500510X/3/hls.m3u8?token=zafu'
// ) // 前置画面展示视频url
const centerVedioUrl = ref() // 前置画面展示视频url
// 目录列表
const voiceInput = ref('')
// ai
const selectAiType = ref()
const aiMessage = ref()
const isHistory = ref(false)
// 定义定时器
let pptTimer: any = null
let attendanceTimer: any = null
// ai问课
const titleIndices: any = ref([]) // 记录所有展开的项的索引
// 答题数据
const answerList: any = ref()
// [
// 已答题状态数据
// {
//   index: 0,
//   type: '1',
//   question: '以下关于植物病原线虫的描述，错误的是？',
//   answers: ['C'],
//   isRight: false,
//   youAnswer: ['D'],
//   analyze:
//     '选项A，从线虫的生物学分类角度，它确实常被称作蠕虫，且在动物界中数量和种类仅次于昆虫，所以该选项正确。选项B，基于线虫的生存环境和寄生特性，多数腐生在水和土壤，少数寄生于人、动物和植物，符合其生态特点，该选项正确。选项C，植物线虫雌、雄成虫多数同形，少数异形，并非均同形，此描述与实际不符，该选项错误。选项D，植物寄生线虫的口针具有骨化特征，这是其能够穿刺植物细胞和组织的结构基础，该选项正确。',
//   testCenter: '植物病原线虫的描述',
//   options: [
//     {
//       label: 'A',
//       value: '<p>线虫又称蠕虫，是低等无脊椎动物，数量和种类仅次于昆虫</p>',
//       isAnswer: false
//     },
//     {
//       label: 'B',
//       value: '<p>多数线虫腐生于水和土壤中，少数寄生于人、动物和植物</p>',
//       isAnswer: true
//     },
//     {
//       label: 'C',
//       value:
//         '<p>植物线虫一般呈两端尖细的线形，长0.3 - 1mm，雌、雄成虫均同形</p>',
//       isAnswer: false
//     },
//     {
//       label: 'D',
//       value: '<p>植物寄生线虫口腔内有骨化口针，能穿刺植物细胞和组织</p>',
//       isAnswer: false
//     }
//   ]
// },
// {
//   index: 1,
//   type: '1',
//   question: '关于植物病原线虫的生活史，说法正确的是？',
//   answers: ['D'],
//   isRight: true,
//   youAnswer: ['D'],
//   analyze:
//     '选项A，一龄幼虫在卵内发育，从卵内孵化出来的是二龄幼虫，并非一龄幼虫，该选项错误。选项B，许多植物线虫二龄幼虫对不良环境具有较强抗性，且具有侵染能力，并非抗性弱且无侵染能力，该选项错误。选项C，在适宜环境条件下，线虫一般3 - 4个星期一代，一个生长季节可发生几代，并非仅发生一代，该选项错误。选项D，确实有的线虫一代短则几天，长则一年，符合线虫生活史特点，该选项正确。',
//   testCenter: '植物病原线虫的生活史',
//   options: [
//     {
//       label: 'A',
//       value:
//         '<p>线虫一生经卵、幼虫、成虫三个时期，一龄幼虫从卵内孵化出来</p>',
//       isAnswer: true
//     },
//     {
//       label: 'B',
//       value: '<p>二龄幼虫对不良环境抗性较弱，不具备侵染能力</p>',
//       isAnswer: false
//     },
//     {
//       label: 'C',
//       value:
//         '<p>线虫在适宜环境下，一般3 - 4个星期一代，一个生长季节仅发生一代</p>',
//       isAnswer: false
//     },
//     {
//       label: 'D',
//       value: '<p>有的线虫一代短则几天，长则一年</p>',
//       isAnswer: false
//     }
//   ]
// },
// {
//   index: 2,
//   type: '1',
//   question: '以下哪种线虫主要危害地下的球茎、块茎、鳞茎、块根等？',
//   answers: ['B'],
//   isRight: false,
//   youAnswer: ['D'],
//   analyze:
//     '选项A，一龄幼虫在卵内发育，从卵内孵化出来的是二龄幼虫，并非一龄幼虫，该选项错误。选项B，许多植物线虫二龄幼虫对不良环境具有较强抗性，且具有侵染能力，并非抗性弱且无侵染能力，该选项错误。选项C，在适宜环境条件下，线虫一般3 - 4个星期一代，一个生长季节可发生几代，并非仅发生一代，该选项错误。选项D，确实有的线虫一代短则几天，长则一年，符合线虫生活史特点，该选项正确。',
//   testCenter: '蛀干害虫',
//   options: [
//     {
//       label: 'A',
//       value: '<p>粒线虫属</p>',
//       isAnswer: true
//     },
//     {
//       label: 'B',
//       value: '<p>茎线虫属</p>',
//       isAnswer: false
//     },
//     {
//       label: 'C',
//       value: '<p>异皮线虫属</p>',
//       isAnswer: false
//     },
//     {
//       label: 'D',
//       value: '<p>球孢囊线虫属</p>',
//       isAnswer: false
//     }
//   ]
// },
// {
//   index: 3,
//   type: '1',
//   question: '植物病原线虫对植物造成破坏的主要原因是？',
//   answers: ['C'],
//   isRight: false,
//   youAnswer: ['D'],
//   analyze:
//     '选项A，线虫穿刺吸食造成的创伤对植物有影响，但不是破坏作用最大的原因，该选项错误。选项B，口针物理损伤是一方面，但相比之下，不是对植物破坏作用最大的因素，该选项错误。选项C，线虫对植物破坏作用最大的是食道腺的分泌物，它不仅有助于口针穿刺和消化细胞内含物，还能对植物细胞产生多种不良影响，该选项正确。选项D，线虫在植物体内移动造成的损伤并非对植物破坏作用最大的原因，该选项错误。',
//   testCenter: '植物病原线虫对植物造成的破坏',
//   options: [
//     {
//       label: 'A',
//       value: '<p>线虫的穿刺吸食造成的创伤</p>',
//       isAnswer: true
//     },
//     {
//       label: 'B',
//       value: '<p>线虫口针的物理损伤</p>',
//       isAnswer: false
//     },
//     {
//       label: 'C',
//       value: '<p>食道腺的分泌物</p>',
//       isAnswer: false
//     },
//     {
//       label: 'D',
//       value: '<p>线虫在植物体内移动造成的损伤</p>',
//       isAnswer: false
//     }
//   ]
// },
// {
//   index: 4,
//   type: '1',
//   question: '关于植物病原线虫的寄生性，下列说法错误的是？',
//   answers: ['C'],
//   isRight: false,
//   youAnswer: ['D'],
//   analyze:
//     '选项A，植物线虫都是活体营养生物，依赖活体生物获取营养，该选项正确。选项B，外寄生线虫的寄生方式就是仅以口针穿刺到寄主组织内吸食，虫体留在植物体外，该选项正确。选项C，内寄生线虫全部进入植物体内吸食，且在寄生过程中是移动的，并非不移动，该选项错误。选项D，内寄生线虫可以在植物内部进行移动和扩散，该选项正确。',
//   testCenter: '植物病原线虫的寄生性',
//   options: [
//     {
//       label: 'A',
//       value: '<p>植物线虫都是活体营养生物</p>',
//       isAnswer: true
//     },
//     {
//       label: 'B',
//       value:
//         '<p>外寄生线虫仅以口针穿刺到寄主组织内吸食，虫体留在植物体外</p>',
//       isAnswer: false
//     },
//     {
//       label: 'C',
//       value: '<p>内寄生线虫全部进入植物体内吸食，在寄生过程中不移动</p>',
//       isAnswer: false
//     },
//     {
//       label: 'D',
//       value: '<p>内寄生线虫可在植物内部进行扩散</p>',
//       isAnswer: false
//     }
//   ]
// },
// {
//   index: 5,
//   type: '2',
//   question: '关于植物病原线虫的生活史，以下说法正确的是？',
//   answers: ['A', 'C', 'D'],
//   isRight: false,
//   youAnswer: ['A', 'B', 'C', 'D'],
//   analyze:
//     '选项A，从线虫生活史的原理看，其确实一生历经卵、幼虫、成虫三个阶段，且一龄幼虫在卵内发育，孵化出的为二龄幼虫，这是符合线虫生长规律的，所以A正确。选项B，实际上许多植物线虫二龄幼虫对不良环境具有较强抗性且有侵染能力，因为二龄幼虫从卵中孵化后，需要面对外界环境挑战并寻找寄主，所以该选项错误。选项C，由于线虫生长特点，在适宜环境下，其繁殖和生长速度快，3 - 4个星期一代，有的线虫一代短则几天，所以几个星期完成一代是合理的，C正确。选项D，基于植物病原线虫的生态学特点，它们有在土壤生活的时期，并且像卵囊和胞囊中的卵等可以休眠状态在植物体外长期存活，以应对不良环境，所以D正确。',
//   testCenter: '植物病原线虫的生活史',
//   options: [
//     {
//       label: 'A',
//       value:
//         '<p>线虫一生经过卵、幼虫、成虫三个时期，一龄幼虫在卵内发育，孵化出来的是二龄幼虫</p>',
//       isAnswer: true
//     },
//     {
//       label: 'B',
//       value: '<p>植物线虫二龄幼虫对不良环境抗性弱，不具有侵染能力</p>',
//       isAnswer: true
//     },
//     {
//       label: 'C',
//       value:
//         '<p>线虫的繁殖速度和生长速度都很快，有的线虫几个星期就可完成一代</p>',
//       isAnswer: false
//     },
//     {
//       label: 'D',
//       value:
//         '<p>线虫的生活史中，有一段时间生活在土壤中，许多线虫能以休眠状态在植物体外长期存活</p>',
//       isAnswer: false
//     }
//   ]
// },
// {
//   index: 6,
//   type: '2',
//   question: '"以下哪些属于植物病原线虫对植物造成破坏的方式？',
//   answers: ['A', 'B', 'C', 'D'],
//   isRight: true,
//   youAnswer: ['A', 'B', 'C', 'D'],
//   analyze:
//     '选项A，线虫通过穿刺吸食在植物组织内造成创伤，这是其直接的破坏方式，就像用针穿刺会对物体表面造成损伤一样，所以A正确。选项B，食道腺分泌物可刺激寄主细胞增大，形成巨型细胞或合胞体，是因为分泌物中的某些成分会影响细胞的生长机制，从而导致细胞异常增大，B正确。选项C，分泌物刺激细胞分裂，使得植物组织出现瘤肿和根部过度分枝等畸形，这是由于细胞分裂的正常调控被干扰，导致组织生长异常，C正确。选项D，食道腺分泌物抑制根茎顶端分生组织细胞的分裂，影响植物的正常生长发育，因为顶端分生组织细胞分裂受抑制，植物的生长就会受到阻碍，D正确。',
//   testCenter: '植物病原线虫对植物造成破坏的方式',
//   options: [
//     {
//       label: 'A',
//       value: '<p>线虫穿刺吸食造成组织创伤</p>',
//       isAnswer: true
//     },
//     {
//       label: 'B',
//       value: '<p>食道腺分泌物刺激寄主细胞增大，形成巨型细胞或合胞体</p>',
//       isAnswer: true
//     },
//     {
//       label: 'C',
//       value: '<p>食道腺分泌物刺激细胞分裂，造成瘤肿和根部过度分枝等畸形</p>',
//       isAnswer: false
//     },
//     {
//       label: 'D',
//       value: '<p>食道腺分泌物抑制根茎顶端分生组织细胞的分裂</p>',
//       isAnswer: false
//     }
//   ]
// },
// {
//   index: 7,
//   type: '2',
//   question: '下列关于不同属植物病原线虫特点的说法，正确的是？',
//   answers: ['A', 'B', 'C', 'D'],
//   isRight: true,
//   youAnswer: ['A', 'B', 'C', 'D'],
//   analyze:
//     '选项A，粒线虫属的形态和寄生特点决定了其雌、雄虫为线形，虫体较长等特征，禾本科植物地上部的环境适合其生存和寄生，所以A正确。选项B，茎线虫属的特征使其适合在地下球茎、块茎等部位寄生，垫刃形食管有助于其获取营养，B正确。选项C，异皮线虫属的雌、雄虫异形以及后期形成孢囊的特点，与它危害植物根部的习性相适应，孢囊可保护内部结构，C正确。选项D，球孢囊线虫属从名称及介绍可知其孢囊形态，马铃薯金线虫对马铃薯的危害严重是由其寄生特性决定的，D正确。',
//   testCenter: '植物病原线虫特点',
//   options: [
//     {
//       label: 'A',
//       value:
//         '<p>粒线虫属的雌、雄虫均为线形，虫体较长，垫刃型食管，口针较小，大都寄生禾本科植物地上部</p>',
//       isAnswer: true
//     },
//     {
//       label: 'B',
//       value:
//         '<p>茎线虫属的雌、雄虫都为线形，垫刃形食管，主要危害地下的球茎、块茎等</p>',
//       isAnswer: true
//     },
//     {
//       label: 'C',
//       value:
//         '<p>异皮线虫属又称胞囊线虫属，雌、雄虫异形，后期雌虫角质层变厚形成孢囊，危害植物根部</p>',
//       isAnswer: false
//     },
//     {
//       label: 'D',
//       value:
//         '<p>球孢囊线虫属的孢囊呈球状或近球状，典型代表种马铃薯金线虫对马铃薯危害严重</p>',
//       isAnswer: false
//     }
//   ]
// },
// {
//   index: 8,
//   type: '2',
//   question: '关于植物病原线虫的寄生性，以下描述正确的是？',
//   answers: ['A', 'B', 'C'],
//   isRight: false,
//   youAnswer: ['A', 'B', 'C', 'D'],
//   analyze:
//     '选项A，植物病原线虫的生存方式决定了它们依赖活体获取营养，所以都是活体营养生物，A正确。选项B，外寄生线虫的寄生方式就是仅用口针穿刺寄主组织吸食，虫体留在植物体外，这样可以在获取营养的同时保证自身安全，B正确。选项C，内寄生线虫为了更好地获取营养和生存，会全部进入植物体内吸食且在寄生过程中移动，C正确。选项D，实际上内寄生线虫可以在植物内部进行移动和扩散，以便在植物体内寻找更适宜的生存环境和获取更多营养，所以该选项错误。',
//   testCenter: '植物病原线虫的寄生性',
//   options: [
//     {
//       label: 'A',
//       value: '<p>植物线虫都是活体营养生物</p>',
//       isAnswer: true
//     },
//     {
//       label: 'B',
//       value:
//         '<p>外寄生线虫仅以口针穿刺到寄主组织内吸食，虫体留在植物体外</p>',
//       isAnswer: true
//     },
//     {
//       label: 'C',
//       value: '<p>内寄生线虫全部进入植物体内吸食，在寄生过程中是移动的</p>',
//       isAnswer: false
//     },
//     {
//       label: 'D',
//       value: '<p>内寄生线虫不会在植物内部进行扩散</p>',
//       isAnswer: false
//     }
//   ]
// },
// {
//   index: 9,
//   type: '2',
//   question: '以下关于线虫的说法，正确的有？',
//   answers: ['A', 'B', 'C', 'D'],
//   isRight: true,
//   youAnswer: ['A', 'B', 'C', 'D'],
//   analyze:
//     '选项A，从线虫的分类和分布特性来看，它确实被称为蠕虫，在动物界数量和种类排名第二且分布广泛，A正确。选项B，植物线虫的形态特征决定了其一般呈两端尖细的线形，并且存在多数雌、雄成虫同形，少数异形的情况，这与它们的繁殖和生存特点相关，B正确。选项C，线虫的身体结构就是分为体壁和体腔，体壁的组成和体腔内包含的系统是其正常生理活动的基础，C正确。选项D，线虫食管的不同类型是根据其形态和开口位置等差异划分的，不同类型适应不同的取食需求，D正确。',
//   testCenter: '线虫的说法',
//   options: [
//     {
//       label: 'A',
//       value:
//         '<p>线虫又称蠕虫，是低等无脊椎动物，数量和种类仅次于昆虫，分布广泛</p>',
//       isAnswer: true
//     },
//     {
//       label: 'B',
//       value:
//         '<p>植物线虫一般呈两端尖细的线形，多数雌、雄成虫同形，少数异形</p>',
//       isAnswer: true
//     },
//     {
//       label: 'C',
//       value:
//         '<p>线虫虫体分为体壁和体腔，体壁从外至内由角质膜、下皮层和肌肉层组成，体腔内有多种系统</p>',
//       isAnswer: false
//     },
//     {
//       label: 'D',
//       value:
//         '<p>线虫食管有垫刃型、滑刃型、矛型三种类型，不同类型食管形态和开口位置有差异</p>',
//       isAnswer: false
//     }
//   ]
// },
// {
//   index: 10,
//   type: '3',
//   question:
//     '植物寄生线虫口腔内特有的骨化器官是___，它能穿刺植物细胞组织并分泌各类酶，降解细胞壁和消化寄主细胞物质。',
//   answers: ['脊柱', '牙齿'],
//   isRight: false,
//   options: [''],
//   analyze:
//     '植物寄生线虫依靠口针进行对植物细胞的穿刺及物质摄取，这是其获取营养的关键器官，所以此处应填口针。',
//   testCenter: '植物寄生线虫口腔内特有的骨化器官'
// },
// {
//   index: 11,
//   type: '3',
//   question:
//     '线虫食管主要有垫刃型、滑刃型和___三种类型，其中垫刃型食管背食管腺开口位于口针基球附近。',
//   answers: [''],
//   isRight: false,
//   options: [''],
//   analyze:
//     '从课程中可知线虫食管类型的相关内容，明确提到有垫刃型、滑刃型和矛型这三种类型。',
//   testCenter: '线虫食管三种类型'
// },
// {
//   index: 12,
//   type: '3',
//   question:
//     '植物病原线虫的生活史历经卵、___和成虫三个时期，且一龄幼虫在卵内发育，从卵内孵化出来的已是第二龄幼虫。',
//   answers: [''],
//   isRight: false,
//   options: [''],
//   analyze:
//     '植物病原线虫的生活史是固定的模式，包含卵、幼虫和成虫这三个阶段，这是其生长发育的基本过程。',
//   testCenter: '植物病原线虫的生活史历三个时期'
// },
// {
//   index: 13,
//   type: '3',
//   question:
//     '粒线虫属的小麦粒线虫，其雌、雄虫均为___，虫体较长，垫刃型食管，口针较小，主要寄生禾本科植物地上部。',
//   answers: [''],
//   isRight: false,
//   options: [''],
//   analyze: '对于粒线虫属的小麦粒线虫形态描述，明确表明雌、雄虫均呈线形。',
//   testCenter: '粒线虫属的小麦粒线虫'
// },
// {
//   index: 14,
//   type: '3',
//   question:
//     '球孢囊线虫属内典型代表种是___，其雌虫珍珠白色，亚球形，具突出的颈，口针强大，孢囊褐色，亚球形。',
//   answers: [''],
//   isRight: false,
//   options: [''],
//   analyze:
//     '课程在介绍球孢囊线虫属时，着重指出典型代表种是马铃薯金线虫，并描述了其相关特征。',
//   testCenter: '球孢囊线虫属内典型代表'
// },
// {
//   index: 15,
//   type: '4',
//   question: '植物寄生线虫的食管有哪些类型，各有什么特点？',
//   answers: '',
//   isRight: false,
//   options: [''],
//   analyze:
//     '植物寄生线虫食管主要有三种类型。垫刃型食管，背食管腺开口位于口针基球附近，腹食管腺开口于中食管球腔内；滑刃型食管，背、腹食管腺均开口于中食管球腔内；矛型食管，口针强大，食管的前部较细而薄，渐向后加宽加厚，呈瓶状。',
//   testCenter: '植物寄生线虫的食管有哪些类型'
// },
// {
//   index: 16,
//   type: '4',
//   question: '植物病原线虫的寄生性表现在哪些方面，外寄生和内寄生有何区别？',
//   answers: '',
//   isRight: false,
//   options: [''],
//   analyze:
//     '这种寄生性特点是由线虫的生存需求决定，外寄生和内寄生方式的不同，导致它们对植物的影响范围和程度有所差异，外寄生相对局限于口针穿刺部位，内寄生则可在植物体内扩散造成更广泛影响。',
//   testCenter: '外寄生和内寄生有何区别'
// },
// {
//   index: 17,
//   type: '4',
//   question:
//     '粒线虫属、茎线虫属、异皮线虫属和球孢囊线虫属的线虫在形态和危害植物部位上有哪些不同？',
//   answers: '',
//   isRight: false,
//   options: [''],
//   analyze:
//     '不同属线虫的形态和寄生部位的差异，与它们的进化适应和生存策略有关，特定的形态利于在相应的植物部位寄生和获取营养。',
//   testCenter: '线虫在形态和危害植物部位上有哪些不同'
// },
// {
//   index: 18,
//   type: '4',
//   question: '植物病原线虫的生活史经历哪些时期，其生态学特点有哪些？',
//   answers: '',
//   isRight: false,
//   options: [''],
//   analyze:
//     '这样的生活史和生态学特点有助于线虫在自然环境中生存繁衍，土壤为其提供生存空间，植物根分泌物引导其找到寄主，而休眠能力帮助其度过不良环境。',
//   testCenter: '植物病原线虫的生活史经历哪些时期'
// },
// {
//   index: 19,
//   type: '4',
//   question: '从课堂内容来看，为什么说植物病原线虫在植物病害防治中难度较大？',
//   answers:
//     '繁殖和传播速度快使得线虫数量易快速增长，广泛分布，而休眠存活特性增加了防治的难度',
//   isRight: false,
//   options: [''],
//   analyze:
//     '繁殖和传播速度快使得线虫数量易快速增长，广泛分布，而休眠存活特性增加了防治的难度，因为很难彻底消灭处于休眠状态的线虫及其繁殖体。',
//   testCenter: '植物病原线虫在植物病害防治中难度'
// }
// ]
// 监听视频状态控制视频播放
watch([playStatus, voiceInput], (newValue: any) => {
  if (pptVideoRef.value) {
    if (newValue == 1) {
      // 播放视频
      pptVideoRef.value.play()
    } else {
      // 暂停视频
      pptVideoRef.value.pause()
    }
  }
  if (afterVideoRef.value) {
    if (newValue == 1) {
      // 播放视频
      afterVideoRef.value.play()
    } else {
      // 暂停视频
      afterVideoRef.value.pause()
    }
  }
  if (beforeVideoRef.value) {
    if (newValue == 1) {
      // 播放视频
      beforeVideoRef.value.play()
    } else {
      // 暂停视频
      beforeVideoRef.value.pause()
    }
  }
  // 语音文稿清空监听
  if (!voiceInput.value.trim()) {
    messageList.value = allmessageList.value
  }
})
onMounted(() => {
  // setTimeout(() => {
  //   onPlay()
  // }, 10)
  if (route.query.videoTime) {
    centerVideoCurrentTime.value = timeToSeconds(route.query.videoTime)
  }
  // 获取课程详情数据
  handleCourseDetail(route.query.id)
  // 创建 script 标签
  // aiscript = document.createElement('script')
  // // 设置第三方客服 JS 的链接
  // aiscript.src =
  //   'https://aichat.zafu.edu.cn/api/AIAgent/app/3a18e216-7b32-ed12-f219-a07b490c0041/embed?protocol=https&host=aichat.zafu.edu.cn&id=3a18e216-7b32-ed12-f219-a07b490c0041'
  // aiscript.async = true
  // aiscript.defer = true
  // // 将 script 标签添加到文档的 head 中
  // document.head.appendChild(aiscript)
  // // 可以添加加载完成的回调
  // aiscript.onload = () => {
  //   // console.log('第三方客服 JS 加载完成')
  //   // @ts-ignore 添加忽略警告
  //   embedChatbot()
  //   // 添加样式覆盖
  //   addCustomStyles()
  // }
})

// 在组件卸载时移除全局点击事件监听
onUnmounted(() => {
  if (pptTimer) {
    clearInterval(pptTimer) // 清除定时器
  }
  if (attendanceTimer) {
    clearInterval(attendanceTimer) // 清除定时器
  }
})

// 获取相关题目
const handlegetTitle = async () => {
  const titleRes = await getTopic(
    detailData.value.classRoomNo,
    detailData.value.viewDate,
    detailData.value.classSeq
  )
  if (titleRes.code == 200) {
    answerList.value = titleRes.data
  }
}

// 修改脚本样式
const addCustomStyles = () => {
  const style = document.createElement('style')
  style.textContent = `
    /* 覆盖图标样式 */
    .maxkb-chat-button {
      width:40px;
      height:40px;
      position: fixed !important;
      right: -8px !important;
      bottom: 34px !important;
    }
  `
  document.head.appendChild(style)
}

// 保存观看记录
// const handleSaveRecord = async () => {
//   const valuesArray = detailData.value.ghs.split('|')
//   const data = {
//     jskcTodayId: detailData.value.id,
//     videoDate: detailData.value.viewDate,
//     djj: detailData.value.classSeq,
//     jsh: detailData.value.classRoomNo,
//     kch: detailData.value.kch,
//     jsgh: valuesArray[0],
//     live: playStatus.value //是否直播 0-否，1-是
//   }
//   const saveRecordRes = await saveRecord(data)
// }

// 问课/题目切换
const handleTitle = (index: any) => {
  toggleIndex.value = index
}

// 获取课程详情
const handleCourseDetail = async (val: any) => {
  if (val) {
    const courseDetailRes = await getcourseDetail(val)
    if (courseDetailRes.code == 200) {
      detailData.value = courseDetailRes?.data
      document.title = detailData.value.kcmc
      // 获取课程直播状态
      getPlayStatus()
      // 获取核心要点-知识点
      handlegetKeypoint()
      // 获取相关题目
      handlegetTitle()
    }
  }
}

// 获取直播视频流
const handleVideoUrls = async () => {
  // 获取直播视频
  const RoomNo = detailData.value.classRoomNo
  const userName = userStore.userInfo?.userName
  const videoUrlsRes: any = await getVideoList(RoomNo, userName)
  if (videoUrlsRes && videoUrlsRes.code == 200) {
    if (videoUrlsRes.data.length > 0) {
      handleUrls(videoUrlsRes)
    }
  }
  switchVideo()
}

// 获取录播视频流
const recoredVideoUrls = async () => {
  const classRoomNo = detailData.value.classRoomNo
  const viewDate = detailData.value.viewDate
  const classSeq = detailData.value.classSeq
  const userName = userStore.userInfo?.userName
  const videoUrlsRes: any = await getRecordVideoList(
    classRoomNo,
    viewDate,
    classSeq,
    userName
  )
  if (videoUrlsRes && videoUrlsRes.code == 200) {
    if (videoUrlsRes.data.length > 0) {
      handleUrls(videoUrlsRes)
    }
  }
  switchVideo()
}

// 直/录播视频流返回数据处理
const handleUrls = (videoUrlsRes: any) => {
  videoUrlsRes.data.forEach((item: any) => {
    // ppt画面
    if (item.channel == 1) {
      item.urlList.forEach((urlItem: any) => {
        if (urlItem.definition == '480') {
          // ppt标清画面(480标清画质)
          pptUrls.value.sdUrl = urlItem.url
          pptUrls.value.enableAudio = urlItem.enableAudio
          centerUrls.value.sdUrl = urlItem.url
        } else if (urlItem.definition == 'default') {
          // ppt默认/高清画面
          pptUrls.value.hdUrl = urlItem.url
          centerUrls.value.hdUrl = urlItem.url
          pptUrls.value.defalutUrl = urlItem.url
          pptUrls.value.enableAudio = urlItem.enableAudio
          centerVedioUrl.value = urlItem.url
          // 中间画面路径
          centerUrls.value.defalutUrl = urlItem.url
          centerUrls.value.enableAudio = pptUrls.value.enableAudio
        }
      })
    }
    // 后置摄像头画面
    if (item.channel == 2) {
      item.urlList.forEach((urlItem: any) => {
        if (urlItem.definition == '480') {
          // 后置摄像头默认/标清画面
          // 右上画面路径
          afterUrls.value.defalutUrl = urlItem.url
          afterUrls.value.sdUrl = urlItem.url
          afterUrls.value.enableAudio = urlItem.enableAudio
        } else if (urlItem.definition == 'default') {
          // 后置摄像头高清画面
          afterUrls.value.hdUrl = urlItem.url
          afterUrls.value.enableAudio = urlItem.enableAudio
        }
      })
    }
  })
}

// 获取视频播放状态
const getPlayStatus = async () => {
  const classRoomNo = detailData.value.classRoomNo
  const date = detailData.value.viewDate
  const classSeq = detailData.value.classSeq
  const statusRes: any = await getCoursePlay(classRoomNo, date, classSeq)
  if (statusRes.code == 200) {
    const statusTitle = statusRes.data
    if (statusTitle == 'DONE' || statusTitle == 'EDITING') {
      // 直播已结束
      playStatus.value = 0 // 0已结束 1正在直播中
      // 获取录播视频流
      recoredVideoUrls()
      // 获取ppt
      getPptList()
      if (pptTimer) {
        clearInterval(pptTimer)
      }
      if (attendanceTimer) {
        clearInterval(attendanceTimer)
      }
    } else {
      playStatus.value = 1
      // 获取直播视频流
      handleVideoUrls()
      // 获取ppt
      getPptList()
      pptTimer = setInterval(getPptList, 2 * 60 * 1000) // 每隔 2 分钟调用一次
    }
  }
  // 保存观看记录
  // handleSaveRecord()
}

// 获取ppt
const getPptList = async () => {
  try {
    const classRoomNo = detailData.value.classRoomNo
    const date = detailData.value.viewDate
    const classSeq = detailData.value.classSeq
    // 获取PPT列表数据
    const pptRes = await getPpt(classRoomNo, date, classSeq)
    pptList.value = pptRes?.data || []
    // 直播状态同步ppt、记录同步时间
    if (playStatus.value == 1) {
      // 记录开始时间
      const startTime = new Date()
      pptTbTime.value = startTime.toLocaleTimeString()
      // 数据加载后滚动到底部
      await nextTick() // 等待DOM更新
      scrollToBottom()
    }
    // 录播状态同步ppt、记录同步时间
    if (playStatus.value == 0) {
      // scrollToActiveItem()
    }
  } catch (error) {
    console.error('获取PPT列表失败:', error)
  }
}

// 直播状态滚动到底部函数
const scrollToBottom = () => {
  if (pptRef.value) {
    pptRef.value.scrollTo({
      top: pptRef.value.scrollHeight,
      behavior: 'smooth'
    })
  }
}

// 计算属性：找到 pptVideoTime <= item.timestamp 的最近一个索引
const nearestPptIndex = computed(() => {
  if (pptVideoTime.value == null) return -1
  // 从后往前找第一个时间小于等于当前视频时间的PPT
  for (let i = pptList.value.length - 1; i >= 0; i--) {
    const pptTime = pptList.value[i].timestamp / 1000000 // 假设时间需要转换
    if (pptVideoTime.value >= pptTime) {
      return i
    }
  }
  return 0
})

// 当 pptList 变化时重置 ref 数组
watch(
  () => pptList.value,
  () => {
    pptItems.value = []
  },
  { deep: true }
)

// 监听视频对应ppt高亮项变化
watch(
  () => nearestPptIndex.value,
  async (newIndex, oldIndex) => {
    // console.log('nearestPptIndex changed:', oldIndex, '->', newIndex)
    if (newIndex !== -1 && newIndex !== oldIndex) {
      try {
        await scrollToActiveItem(0)
      } catch (error) {
        console.error('Scroll failed:', error)
      }
    }
  },
  { flush: 'post' } // 确保在DOM更新后执行
)

// 录播视频播放时间
const handleTimeUpdate = async () => {
  pptVideoTime.value = Math.trunc(pptVideoRef.value.currentTime)
  // 直播不需要监听视频播放时间
  if (playStatus.value == 1) return
  // 录播需要监听视频播放时间
  if (playStatus.value == 0) {
    // 使用find找到第一个匹配的知识点
    const matchedItem = knowledgekList.value.find((item: any) => {
      return (
        pptVideoTime.value >= timeToSeconds(item.startTime) &&
        pptVideoTime.value <= timeToSeconds(item.endTime)
      )
    })
    knowsPoint.value = matchedItem || '' // 如果没有匹配项则设为空
  }
}

// 监听视频对应ppt高亮项变化
watch(
  () => nearestPptIndex.value,
  async (newIndex, oldIndex) => {
    // console.log('nearestPptIndex changed:', oldIndex, '->', newIndex)
    if (newIndex !== -1 && newIndex !== oldIndex) {
      try {
        await scrollToActiveItem(0)
      } catch (error) {
        console.error('Scroll failed:', error)
      }
    }
  },
  { flush: 'post' } // 确保在DOM更新后执行
)

// 录播状态滚动到当前高亮项
// 滚动到当前高亮项
const scrollToActiveItem = async (val: any) => {
  // val 0自动播放 1用户点击
  await nextTick() // 等待 DOM 更新
  let activeIndex
  if (val == 0) {
    activeIndex = nearestPptIndex.value
  }
  if (val == 1) {
    activeIndex = selectPpt.value
  }
  if (activeIndex === -1 || !pptItems.value[activeIndex] || !pptRef.value) {
    return
  }
  const item = pptItems.value[activeIndex]
  const container = pptRef.value

  // 计算元素和容器的位置
  const itemTop = item.offsetTop
  const itemHeight = item.clientHeight
  const containerHeight = container.clientHeight

  // 计算目标滚动位置，使元素垂直居中
  const targetScrollTop = itemTop - containerHeight / 2 + itemHeight / 2

  // 平滑滚动
  container.scrollTo({
    top: targetScrollTop,
    behavior: 'smooth'
  })
}

// 点击ppt
const handlePpt = (time: any, index: any) => {
  selectPpt.value = index
  // 视频跳转到ppt生成的指定时间
  const pptVideo = pptVideoRef.value
  if (pptVideo) {
    pptVideo.currentTime = time / 1000000 // 设置视频的当前时间
    pptVideo.play() // 自动播放视频
  }
  const afterVideo = afterVideoRef.value
  if (afterVideo) {
    afterVideo.currentTime = time / 1000000 // 设置视频的当前时间
    afterVideo.play() // 自动播放视频
  }
  const beforeVideo = beforeVideoRef.value
  if (beforeVideo) {
    beforeVideo.currentTime = time / 1000000 // 设置视频的当前时间
    beforeVideo.play() // 自动播放视频
  }
  // 触发滚动
  scrollToActiveItem(1)
}

// 视频标清/高清切换
const handleToggle = (index: any) => {
  currentBtn.value = index
  centerVideoCurrentTime.value = pptVideoRef.value.currentTime
  if (index == 0) {
    //默认
    centerVedioUrl.value = centerUrls.value.defalutUrl
  } else if (index == 1) {
    // HD
    centerVedioUrl.value = centerUrls.value.hdUrl
  } else if (index == 2) {
    //SD
    centerVedioUrl.value = centerUrls.value.sdUrl
  }
  switchVideo()
}
// 获取核心要点/知识点
const handlegetKeypoint = async () => {
  const pointData = {
    classRoomNo: detailData.value.classRoomNo,
    viewDate: detailData.value.viewDate,
    classSeq: detailData.value.classSeq,
    kch: detailData.value.kch
  }
  const pointRes = await getKeypoint(
    pointData.classRoomNo,
    pointData.viewDate,
    pointData.classSeq,
    pointData.kch
  )
  knowledgekList.value = pointRes?.data.knowledgePointList
  keyContentList.value = pointRes?.data.knowledgeKeyList
  difficultContentList.value = pointRes?.data.knowledgeDifficultyList
}

// 获取视频播放
const switchVideo = async () => {
  // 中间画面路径
  const pptHls = new Hls()
  if (Hls.isSupported()) {
    pptHls.loadSource(centerVedioUrl.value)
    pptHls.attachMedia(pptVideoRef.value!)
    // 录播恢复播放时间
    if (playStatus.value == 0 && centerVideoCurrentTime.value > 0) {
      pptVideoRef.value.currentTime = centerVideoCurrentTime.value
      await new Promise((resolve) => setTimeout(resolve, 300))
      try {
        // pptVideoRef.value.muted = true
        await pptVideoRef.value.play()
      } catch (err) {
        console.log('自动播放被阻止，需要用户交互')
        pptVideoRef.value.controls = true // 显示控件让用户手动播放
      }
      setTimeout(() => {
        console.log('播放了')
        pptVideoRef.value.play()
      }, 1000)
    }
    // 关键事件监听
    pptHls.on(Hls.Events.MANIFEST_PARSED, async () => {
      console.log('视频清单已解析，可以安全播放')
      if (playStatus.value == 0 && centerVideoCurrentTime.value > 0) {
        pptVideoRef.value.currentTime = centerVideoCurrentTime.value
        await new Promise((resolve) => setTimeout(resolve, 300))
        try {
          // pptVideoRef.value.muted = true
          await pptVideoRef.value.play()
        } catch (err) {
          console.log('自动播放被阻止，需要用户交互')
          pptVideoRef.value.controls = true // 显示控件让用户手动播放
        }
        setTimeout(() => {
          pptVideoRef.value.play()
        }, 1000)
      }
    })

    pptHls.on(Hls.Events.LEVEL_LOADED, (event, data) => {
      console.log('视频片段已加载:', data.level)
    })

    pptHls.on(Hls.Events.FRAG_BUFFERED, () => {
      console.log('视频片段已缓冲')
    })
  } else {
    console.error('HLS is not supported')
  }
  // 后置摄像头画面路径
  const afterHls = new Hls()
  if (Hls.isSupported()) {
    afterHls.loadSource(afterUrls.value.defalutUrl)
    afterHls.attachMedia(afterVideoRef.value!)
    if (playStatus.value == 0 && centerVideoCurrentTime.value > 0) {
      afterVideoRef.value.currentTime = centerVideoCurrentTime.value
      afterVideoRef.value.play()
    }
  } else {
    console.error('HLS is not supported')
  }
}

// 删除ppt
const deletePpt = async (url: any, index: any) => {
  const date = detailData.value.viewDate
  const delPptRes = await delPpt(url, date)
  if (delPptRes.code == 200) {
    pptList.value.splice(index, 1)
    ElMessage.success('删除成功!')
  }
}

const toptoggleVideo = () => {
  //视频切换成主屏幕
  const oldbeforeUrl = afterUrls.value // 切换之前保存视频地址
  const oldcenterUrl = centerUrls.value
  centerUrls.value = oldbeforeUrl
  afterUrls.value = oldcenterUrl
  if (currentBtn.value == 0) {
    // 判断主屏幕展示什么画质视频 0 默认 1 HD 2 SD
    centerVedioUrl.value = centerUrls.value.defalutUrl
  } else if (currentBtn.value == 1) {
    centerVedioUrl.value = centerUrls.value.hdUrl
  } else {
    centerVedioUrl.value = centerUrls.value.sdUrl
  }
  const isenableAudio =
    oldcenterUrl.enableAudio === false || oldbeforeUrl.enableAudio === false
  if (isenableAudio) {
    if (!centerUrls.value.enableAudio) {
      afterVideoRef.value.muted = false // 取消静音
    } else {
      afterVideoRef.value.muted = true // 打开静音
    }
  }
  // 切换成主屏幕，保存中间视频播放时间
  centerVideoCurrentTime.value = pptVideoRef.value.currentTime
  switchVideo()
}

// 拖拽进度条
const onSeeking = () => {
  // 获取当前视频播放时间
  centerVideoCurrentTime.value = pptVideoRef.value.currentTime
  const afterVideo = afterVideoRef.value
  if (afterVideo) {
    afterVideo.currentTime = centerVideoCurrentTime.value // 设置视频的当前时间
    afterVideo.play() // 自动播放视频
  }
  // const beforeVideo = beforeVideoRef.value
  // if (beforeVideo) {
  //   beforeVideo.currentTime = centerVideoCurrentTime.value // 设置视频的当前时间
  //   beforeVideo.play() // 自动播放视频
  // }
}

// 直播/录播同步找到ppt列表项
// 判断当前项是否应该高亮
const getActiveClass = (index: number) => {
  if (selectPpt.value != null) {
    if (selectPpt.value !== nearestPptIndex.value) {
      return index === nearestPptIndex.value ? 'activePpt' : ''
    } else {
      return selectPpt.value === index ? 'activePpt' : ''
    }
  } else {
    return index === nearestPptIndex.value ? 'activePpt' : ''
  }
}

// AI助手
const handleOpenAi = () => {
  openAi.value = true
}
const handlecloseAi = () => {
  openAi.value = false
}

// 视频抓图按钮
const handleCapturePicture = async () => {
  const video = pptVideoRef.value
  let currentTime = 0
  if (video) {
    // 获取当前播放时间
    currentTime = video.currentTime * 1000000
  }
  const classRoomNo = detailData.value.classRoomNo
  const date = detailData.value.viewDate
  const classSeq = detailData.value.classSeq
  const timestamp = currentTime
  const captureRes = await getCapturePicture(
    classRoomNo,
    date,
    classSeq,
    timestamp
  )
  if (captureRes.code == 200) {
    ElMessage.success('抓图成功！')
    getPptList()
  }
}

// 知识点弹窗
const handleKnowledgePoint = () => {
  showknowledge.value = true
  if (knowsPoint.value) {
    knowledgeDetail.name = knowsPoint.value.name
    knowledgeDetail.memo = knowsPoint.value.memo
    knowledgeDetail.startTime = knowsPoint.value.startTime
    knowledgeDetail.endTime = knowsPoint.value.endTime
  }
}

// 中间视频暂停/播放控制右侧的视频播放/暂停
const onPause = () => {
  afterVideoRef.value.pause()
}
const onPlay = () => {
  pptVideoRef.value.play()
}

// 关闭知识点弹窗
const closeknowledgeDialog = () => {
  showknowledge.value = false
}

// Ai
const handleSelectOne = () => {
  selectAiType.value = 0
}
const handleSelectTwo = () => {
  selectAiType.value = 1
}
const handleSelectThree = () => {
  selectAiType.value = 2
}

// 历史对话
const handleHistory = () => {
  isHistory.value = !isHistory.value
}

//ai问课
const handleTitleDown = (index: any) => {
  console.log(index)
  if (titleIndices.value.includes(index)) {
    // 如果当前项已展开，则收起
    titleIndices.value = titleIndices.value.filter((i: any) => i !== index)
  } else {
    // 否则展开当前项
    titleIndices.value.push(index)
  }
}
</script>

<style lang="scss" scoped>
.courseDetail {
  position: relative;
}
.courseDetail-height {
  background: #fff;
  height: calc(100vh - 60px);
}
.courseDetail-left {
  width: 18.8%;
  padding: 16px 4px 16px 20px;
  box-sizing: border-box;
  .pptLiveHeight {
    height: calc(100vh - 150px);
  }
  .pptRecordHeight {
    height: calc(100vh - 120px);
  }
  .ppt-content {
    // height: 600px;
    padding-right: 4px;
    box-sizing: border-box;
    // overflow-y: scroll;
    overflow-y: auto;
    .pptList {
      width: 100%;
      height: 180px;
      background: #f7f7f7;
      border-radius: 6px;
      margin-bottom: 16px;
      position: relative;
      border: 3px solid #f7f7f7;
      .pptImg {
        border-radius: 4px;
      }
      .time {
        width: 70px;
        height: 24px;
        line-height: 24px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 0px 0px 0px 6px;
        position: absolute;
        left: 0px;
        bottom: 0px;
      }
      .num {
        width: 24px;
        height: 24px;
        line-height: 24px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 6px 0px 0px 0px;
        position: absolute;
        top: 0px;
        left: 0px;
      }
      .pptDel {
        width: 24px;
        height: 24px;
        position: absolute;
        top: 4px;
        right: 6px;
      }
    }
    .currentPpt {
      box-shadow: 0px 1px 11px 1px rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      border: 3px solid #4c8bf3;
    }
    .pptList:last-child {
      margin-bottom: 0px;
    }
    .pptList:hover {
      // box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
    }
    .activePpt {
      border-color: #4c8bf3;
    }
  }
}
.courseDetail-center {
  width: 58.3%;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  .center-video-box {
    // padding-right: 4px;
    // box-sizing: border-box;
  }
  .video-content {
    height: 87vh;
    // overflow-y: scroll;
  }
  .courseDetail-top {
    padding: 16px 20px 20px;
    box-sizing: border-box;
  }
  .contentSummary {
    width: 96px;
    height: 24px;
    background: #fff;
    padding: 0px 8px;
    box-sizing: border-box;
    border-radius: 2px 2px 2px 2px;
    .contentSummary-icon {
      width: 20px;
      height: 20px;
    }
  }
  .contentSummary:hover {
    background-color: #f0f0f0;
  }
  .right-className {
    display: flex;
    align-items: center;
    .roomMix {
      width: 52px;
      height: 24px;
      line-height: 23px;
      margin-left: 12px;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #b6d2ff;
    }
    .audioNum {
      width: 64px;
      height: 24px;
      line-height: 24px;
      background: linear-gradient(312deg, #80a6ff 0%, #bccdff 100%);
      border-radius: 2px 2px 2px 2px;
    }
    .course-marker {
      width: 84px;
      height: 24px;
      margin-right: 8px;
    }
    .course-name {
      font-size: 18px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .classIcon {
    width: 16px;
    height: 16px;
  }
  .detailIcon {
    margin-right: 16px;
  }
  .classIcon-name {
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    margin-left: 2px;
  }
  .detailIcon-box {
    margin-top: 16px;
  }
  // 视频部分
  .video-center {
    background: #000;
    height: 604px;
    // overflow: hidden;
    // width: 100%;
    position: relative;
    video {
      width: 100%;
      height: 100%;
      // object-fit: contain;
    }
    .video-text {
      width: 80%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 60px;
      color: #fff;
      font-weight: 800;
      font-size: 22px;
      text-shadow:
        0 0 2px #0958da,
        0 0 4px #0958da,
        0 0 6px #0958da,
        0 0 8px #0958da;
    }
  }
  .video-box {
    padding: 0px 20px 20px;
    box-sizing: border-box;
    // border-bottom: 1px solid #e8e8e8;
    position: relative;
    .praise-box {
      width: 400px;
      height: 80px;
      position: absolute;
      top: 220px;
      left: 50%;
      padding: 20px 32px;
      box-sizing: border-box;
      margin-left: -200px;
      box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.12);
      border-radius: 8px 8px 8px 8px;
      .like-bg {
        width: 228px;
        height: 80px;
        position: absolute;
        right: 0px;
        top: 0;
      }
      img {
        width: 40px;
        height: 40px;
      }
    }
  }
  .video-top {
    height: 42px;
    padding: 10px 20px;
    box-sizing: border-box;
    background: #555555;
    border-radius: 6px 6px 0px 0px;
  }
  .fullScreen-icon {
    width: 22px;
    height: 22px;
  }
  .chapter {
    font-weight: 600;
    font-size: 16px;
    vertical-align: middle;
  }
  .picture-quality .el-button {
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
  }
  .picture-quality .el-button:hover {
    color: #fff;
  }
  .capturePicture {
    height: 24px;
    border: none;
    background: #5f49e5;
  }
  .capturePicture:hover {
    background: #725eeb;
  }
  .no-hover {
    height: 24px;
    border-color: #0f63ed;
  }
  .no-hover:hover {
    /* 恢复为默认状态的样式，这里以默认按钮为例 */
    color: var(--el-button-default-font-color);
    background-color: var(--el-button-default-bg-color);
    border-color: var(--el-button-default-border-color);
    /* 如果有阴影效果也可以去除 */
    box-shadow: none;
  }
  .no-hover:focus,
  .no-hover:hover {
    border-color: rgba(15, 99, 237, 0.12) !important;
    background: #0f63ed !important;
    color: #fff !important;
  }
}
.courseDetail-right {
  width: 22.9%;
  position: relative;
  // 视频切换
  .videoToggle {
    padding: 16px 20px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #e8e8e8;

    .videoList {
      height: 224px;
      border: 1px solid #e8e8e8;
      margin-bottom: 10px;
      position: relative;
      background: #333;
      border-radius: 6px;
      .videoList-top {
        display: none;
        height: 36px;
        background: rgba(0, 0, 0, 0.11);
        position: absolute;
        top: 0;
        left: 0;
        padding: 5px 20px;
        box-sizing: border-box;
        .videoToggle-icon {
          width: 20px;
          height: 20px;
        }
      }
    }
    .videoList:hover {
      .videoList-top {
        display: block;
      }
    }
  }
  .feature {
    padding: 16px 20px;
    box-sizing: border-box;
  }
}
// 底部人数
.right-classDetail-bottom {
  height: 80px;
  background: #ffffff;
  border-radius: 0px 0px 6px 6px;
  border: 1px solid #e9e9e9;
  padding: 6px 0px;
  box-sizing: border-box;
}
.classPeople {
  text-align: center;
  width: 20%;
  // height: 100%;
  border-right: 1px solid #e9e9e9;
}
// 笔记
:deep(.border-color-red .el-textarea__inner) {
  box-shadow: 0 0 0 1px rgb(245, 108, 108) inset;
}
.note-content {
  height: 416px;
  border-radius: 4px 4px 4px 4px;
  // border: 1px solid #e5e5e5;
  // padding: 12px 20px;
  box-sizing: border-box;
  .note-time {
    margin-left: 4px;
    margin-right: 20px;
  }
  .note-save {
    width: 60px;
    height: 32px;
  }
  .note-save:hover,
  .note-save:focus {
    color: #fff;
    background: #0f63ed;
  }
  :deep(.el-textarea__inner) {
    height: 100%;
  }
}
.noteToggle {
  padding-bottom: 4px;
  border-bottom: 4px solid #fff;
}
.activeToggle {
  border-color: #0f63ed;
}
// 右侧简介
/* 定义过渡的初始状态：元素进入前和离开后的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0; /* 透明度为 0，元素不可见 */
  transform: translatex(23%); /* 向上偏移 20px */
}

/* 定义过渡的活动状态：元素进入和离开过程中的状态 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease; /* 过渡时间为 0.3 秒，动画曲线为 ease */
}

/* 定义过渡的结束状态：元素进入后和离开前的状态 */
.fade-enter-to,
.fade-leave-from {
  opacity: 1; /* 透明度为 1，元素完全可见 */
  transform: translateY(0); /* 恢复到原始位置 */
}

.right-intro {
  position: fixed;
  width: 23%;
  height: calc(100vh - 72px);
  top: 56px;
  right: 0px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9); /* 半透明背景 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  .intro-box {
    height: calc(100vh - 132px);
  }
  .intro-header {
    width: 100%;
    height: 60px;
    padding: 20px 20px 0px;
    box-sizing: border-box;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
    position: relative;
    .introList {
      padding: 0px 8px 20px;
      box-sizing: border-box;
      border-bottom: 3px solid #fff;
    }
    .introActive {
      color: #0f63ed;
      border-color: #0f63ed;
    }
  }
}
.arrowRight {
  width: 32px;
  height: 40px;
  position: absolute;
  right: 0px;
  top: 10px;
}
// 简介
.intro-content {
  height: 100%;
  padding: 16px 0px;
  box-sizing: border-box;
  overflow-y: scroll;
  border-radius: 0px 0px 0px 8px;
  .syllabus {
    padding: 0px 20px;
    box-sizing: border-box;
    .syllabus-down {
      background: url('@/assets/images/ic_download_nor.png') no-repeat;
      background-size: 100% 100%;
    }
    .syllabus-down:hover {
      background: url('@/assets/images/ic_download_hov.png') no-repeat;
      background-size: 100% 100%;
    }
    .syllabus-eye {
      background: url('@/assets/images/ic_view.png') no-repeat;
      background-size: 100% 100%;
    }
    .syllabus-eye:hover {
      background: url('@/assets/images/ic_view_nor.png') no-repeat;
      background-size: 100% 100%;
    }
    .upload-button {
      width: 76px;
      height: 32px;
    }
    .upload-button:hover {
      background: #4c8bf3;
      color: #fff;
    }
    .files-list {
      .files-box {
        width: 94%;
        height: 36px;
        background: #fafafa;
        border-radius: 6px 6px 6px 6px;
        padding: 0px 12px;
        box-sizing: border-box;
        .fileName {
          color: #1d2129;
          margin-left: 12px;
        }
      }
    }
  }
  .people-box {
    padding: 0px 20px;
    box-sizing: border-box;
  }
  .teacherList {
    overflow-y: scroll;
  }
  .teacherIntro {
    padding: 12px 0px;
    box-sizing: border-box;
    .warnEdit {
      width: 104px;
      height: 32px;
      line-height: 32px;
    }
    .warnEdit:hover {
      background: #4c8bf3;
      color: #fff;
    }
  }
  .intro-teacher {
    position: relative;
    height: 125px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px 6px 6px 6px;
    background: url('@/assets/images/teacher-bg.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom: 16px;
    .teacher-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    .teacher-detail {
      margin-left: 20px;
    }
    .edu-level {
      width: 16px;
      height: 16px;
      margin-left: 8px;
    }
    .teacher-name {
      font-weight: 500;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.85);
    }
    .teacher-college {
      // max-width: 100px;
      height: 24px;
      line-height: 22px;
      padding: 0px 12px;
      box-sizing: border-box;
      border-radius: 12px;
      background: #d3e3fd;
      font-size: 12px;
      color: #0f63ed;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
    }
    .teacherNew {
      width: 46px;
      height: 20px;
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
  }
  .course-people {
    padding: 16px 20px;
    box-sizing: border-box;
    width: 100%;
    height: 94px;
    background: #ffffff;
    box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px 6px 6px 6px;
    margin-bottom: 26px;
    .sd-icon {
      width: 32px;
      height: 32px;
    }
    .course-people-left {
      width: 50%;
      padding-right: 20px;
      box-sizing: border-box;
      border-right: 1px solid #e8e8e8;
    }
    .course-people-right {
      width: 50%;
      padding-left: 20px;
      box-sizing: border-box;
    }
  }
}
// 目录
.catalogue-box {
  padding: 16px 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  border-radius: 0px 0px 0px 8px;
  .catalogue-list {
    padding: 20px 20px 12px;
    box-sizing: border-box;
    box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.05);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #e9e9e9;
    .catalogue-top {
      padding-bottom: 16px;
      box-sizing: border-box;
      border-bottom: 1px solid #e8e8e8;
      margin-bottom: 11px;
    }
  }
}
// AI助手
.ai-content {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: fixed;
  background: #121212;
  right: -8px;
  bottom: 34px;
  background-image: url('@/assets/images/pic_ai.png');
  background-size: 100%;
  transition: transform 0.3s ease; /* 添加过渡效果 */
}
.big-bg {
  width: 50px;
  height: 50px;
  background: #121212;
  border-radius: 50%;
  position: fixed;
  right: 30px;
  bottom: 34px;
  background-image: url('@/assets/images/pic_ai.png');
  background-size: 67px;
  background-position: -13px -16px;
}
.ai-content:hover {
  transform: translate(-38px, 0px);
  background-image: url('@/assets/images/pic_ai.png');
  background-size: 67px;
  background-position: -13px -16px;
}
.ai-box {
  width: 445px;
  height: 728px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 8px 8px 8px 8px;
  position: fixed;
  right: 96px;
  bottom: 32px;
  background-image: url('@/assets/images/pic_bg.png');
  background-size: 100%;
  .ai-top {
    padding: 16px 20px;
    box-sizing: border-box;
    height: 56px;
  }
  .dialogueBox {
    height: 556px;
    padding: 4px 20px 0px;
    box-sizing: border-box;
    .dialogueTop {
      padding: 16px 20px;
      box-sizing: border-box;
      margin: 0 auto;
      height: 84px;
      background: rgba(255, 255, 255, 0.5);
      box-shadow: 0px 1px 5px 0px rgba(114, 117, 148, 0.09);
      border-radius: 6px 6px 6px 6px;
      position: relative;
      .ai-bg {
        position: absolute;
        right: 0px;
        bottom: 0px;
      }
    }
  }
  // .toggle-box {
  //   height: 56px;
  //   padding: 12px 20px;
  //   box-sizing: border-box;
  //   background: linear-gradient(7deg, #ffffff 0%, #dfeafd 100%);
  //   box-shadow: inset 0px -1px 0px 0px #e8e8e8;
  //   .toggle-text {
  //     width: 158px;
  //     height: 32px;
  //     padding: 4px 16px;
  //     border-radius: 4px;
  //     box-sizing: border-box;
  //   }
  //   .toggle-icon {
  //     width: 18px;
  //     height: 18px;
  //     margin-left: 10px;
  //   }
  // }
  .message-content {
    padding: 16px 0px;
    box-sizing: border-box;
    .ai-img {
      width: 30px;
      height: 30px;
    }
    .message {
      border-radius: 4px 8px 8px 8px;
      padding: 12px 16px;
      box-sizing: border-box;
      margin-left: 10px;
      position: relative;
      .messageCopy {
        width: 16px;
        height: 16px;
        position: absolute;
        bottom: 16px;
        left: 16px;
      }
    }
    .send-message {
      // padding-bottom: 36px;
      border-radius: 8px 4px 8px 8px;
      margin-top: 12px;
    }
  }
  .ai-bottom {
    padding: 14px 20px 20px;
    box-sizing: border-box;
    position: absolute;
    left: 0px;
    bottom: 0px;
    .ai-type-r1 {
      padding: 2px 10px;
      box-sizing: border-box;
      height: 26px;
      border-radius: 13px;
      border: 1px solid #0f63ed;
      .ai-type-one {
        background-image: url('@/assets/images/ic_r1_nor.png');
        background-size: 100%;
        margin-right: 3px;
      }
    }
    .ai-type-nor:hover {
      background: rgba(15, 99, 237, 0.12);
    }
    .active-r1 {
      .ai-type-one {
        background-image: url('@/assets/images/ic_r1_sel.png');
      }
    }
    .active-r1:hover,
    .active-two:hover,
    .active-three:hover {
      opacity: 0.85;
    }
    .ai-type {
      padding: 2px 10px;
      box-sizing: border-box;
      height: 26px;
      border-radius: 13px;
      border: 1px solid #e8e8e8;
      .ai-type-two {
        background-image: url('@/assets/images/ic_local_nor.png');
        background-size: 100%;
        margin-right: 3px;
      }
      .ai-type-three {
        background-image: url('@/assets/images/ic_web_nor.png');
        background-size: 100%;
        margin-right: 3px;
      }
    }
    .active-two {
      border-color: #0f63ed;
      .ai-type-two {
        background-image: url('@/assets/images/ic_local_sel.png');
      }
    }
    .active-three {
      border-color: #0f63ed;
      .ai-type-three {
        background-image: url('@/assets/images/ic_web_sel.png');
      }
    }
    .send-box {
      height: 46px;
      padding: 2px 5px;
      box-sizing: border-box;
      border-radius: 8px 8px 8px 8px;
      box-shadow: 0 0 0 2px transparent;
      margin-top: 10px;
      background:
        linear-gradient(white, white) padding-box,
        linear-gradient(
            90deg,
            rgba(232, 84, 255, 1),
            rgba(111, 100, 249, 1),
            rgba(110, 176, 253, 1)
          )
          border-box;
      border: 2px solid transparent;
      .send-input {
        width: 89%;
        :deep(.el-input__wrapper) {
          box-shadow: none;
        }
      }
      .sendIcon {
        background-image: url('@/assets/images/ic_send_dis.png');
        background-size: 100%;
        margin-left: 9px;
      }
      .active-sead {
        background-image: url('@/assets/images/ic_send.png');
      }
      .sendIcon::before {
        content: '';
        display: inline-block;
        border-left: 1px solid #e8e8e8; /* 竖杠样式 */
        height: 16px; /* 高度控制 */
        margin-left: -9px;
        margin-top: 5px;
      }
    }
  }
}
.historyList {
  padding: 0px 10px;
  box-sizing: border-box;
  position: relative;
  .historyDel {
    position: absolute;
    right: 12px;
    top: 7px;
    display: none;
  }
}
.historyList:hover {
  background: rgba(15, 99, 237, 0.12);
  border-radius: 8px 8px 8px 8px;
  .historyDel {
    display: block;
  }
}
.historyDel:hover {
  background: #fff;
  border-radius: 4px;
}
// 出勤率
.progress-bar {
  width: 60px;
  height: 8px;
  background: #eef1f5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.progress {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 4px;
  // background: red;
}
.attendanceRate {
  margin-bottom: 3px;
}
.knowledge-item {
  min-height: 56px;
  background: #ffffff;
  box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.05);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #e9e9e9;
  padding: 16px 20px;
  box-sizing: border-box;
  margin-bottom: 6px;

  .knowDetail {
    padding-top: 16px;
    box-sizing: border-box;
    margin-top: 8px;
    line-height: 22px;
    border-top: 1px solid #e8e8e8;
  }
  .corepointsDetail {
    padding-top: 10px;
    box-sizing: border-box;
    line-height: 22px;
  }
  .knowPlay {
    background-image: url('@/assets/images/ic_blueplay.png');
    background-size: 100%;
  }
  .knowPlay:hover {
    background-image: url('@/assets/images/ic_play_hover.png');
  }
}
.corePoints-item {
  margin-bottom: 12px;
}
// 视频直播底部数据
.look-contment {
  width: 100%;
  display: flex;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
}
.lookItem {
  flex: 1;
  text-align: center;
  .lookData-item,
  .peopleItem {
    font-family: 'PingFang SC, PingFang SC';
    font-weight: 600;
    font-size: 18px;
    color: #0f63ed;
  }
  .lookData-name {
    font-family: 'PingFang SC, PingFang SC';
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }
}
//功能
.lookDetail-content {
  width: 100%;
  height: 92px;
  margin-top: 25px;
  .lookDetail-list {
    width: 25%;
    float: left;
    text-align: center;
    margin-bottom: 24px;
    .lookImg {
      width: 35px;
      height: 35px;
      margin-bottom: 6px;
    }
  }
}
// 笔记
.note-box {
  padding: 16px 20px;
  box-sizing: border-box;
  .noteList {
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #e9e9e9;
    padding: 12px 20px;
    box-sizing: border-box;
    margin-bottom: 12px;
    .noteList-desc {
      margin-top: 10px;
    }
    .quality-up {
      background-image: url('@/assets/images/ic_up.png');
      background-size: 100%;
    }
    .quality-down {
      background-image: url('@/assets/images/ic_down.png');
      background-size: 100%;
    }
    .quality-up:hover {
      background-image: url('@/assets/images/ic_up_hover.png');
      background-size: 100%;
    }
    .quality-down:hover {
      background-image: url('@/assets/images/ic_down_hover.png');
      background-size: 100%;
    }
  }
}

//进度条
.live {
  video::-webkit-media-controls-timeline {
    display: none;
  }
}
//观看的当前时间
.live {
  video::-webkit-media-controls-current-time-display {
    display: none;
  }
}

//剩余时间
.live {
  video::-webkit-media-controls-time-remaining-display {
    display: none;
  }
}

//播放按钮
.live {
  video::-webkit-media-controls-play-button {
    display: none;
  }
}
:deep(.el-button:hover) {
  background: #0f63ed;
  color: #fff;
}
.line-height-38 {
  line-height: 38px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 400px;
}
.ic-tb {
  animation: spin 3s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
// 问课样式
.questionsCourse {
  padding: 16px 20px;
  box-sizing: border-box;
}
.videoToggle-titletitle {
  margin-bottom: 20px;
}
.questionsBox {
  overflow: hidden;
  .ai-questions {
    height: 38px;
    line-height: 38px;
    margin-top: 12px;
    border-radius: 8px;
  }
}
// 相关题目
.title-item {
  min-height: 68px;
  padding: 12px 16px;
  box-sizing: border-box;
  box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.05);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #e9e9e9;
  margin-bottom: 12px;
  .item-down {
    background-image: url('@/assets/images/ic_down.png');
    background-size: 100%;
  }
  .active-down {
    background-image: url('@/assets/images/ic_down_hover.png');
    background-size: 100%;
  }
  .item-down:hover {
    background-image: url('@/assets/images/ic_down_hover.png');
    background-size: 100%;
  }
  .item-up {
    background-image: url('@/assets/images/ic_up.png');
    background-size: 100%;
  }
  .active-up {
    background-image: url('@/assets/images/ic_up_hover.png');
    background-size: 100%;
  }
  .item-up:hover {
    background-image: url('@/assets/images/ic_up_hover.png');
    background-size: 100%;
  }
}
.active-border {
  border-color: #0f63ed;
}
.title-item:hover {
  border-color: #0f63ed;
}
.titleBox {
  height: 50vh;
  overflow-y: scroll;
}
.title-type {
  width: 48px;
  height: 20px;
  padding: 0px 6px;
  box-sizing: border-box;
  margin-left: 12px;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #0f63ed;
}
.topicList {
  .topic {
    height: 56px;
    line-height: 56px;
  }
  .rightTopic {
    background: #fff6f7;
  }
  .errTopic {
    background: #f6fcfa;
  }
  .topicType {
    display: inline-block;
    width: 58px;
    height: 24px;
    line-height: 24px;
    border-radius: 2px;
    margin-right: 4px;
    margin-left: 13px;
  }
  .singleType {
    background: #e4eeff;
  }
  .moreType {
    background: #fff1e9;
    color: #e37318;
  }
  .fillType {
    background: #f2e6fa;
    color: #8f05e5;
  }
  .QuestionsType {
    background: #e3f9e9;
    color: #2ba471;
  }
  .answerNum {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 24px;
    margin-right: 10px;
  }
  .singleNum {
    border-radius: 50%;
    background: #e4eeff;
  }
  .moreNum {
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #cbcbcb;
  }
  .answerList {
    margin-bottom: 20px;
    padding-left: 28px;
    box-sizing: border-box;
    margin-top: 16px;
  }
  .isanswerList {
    margin-bottom: 10px;
    // padding: 0px 20px 0px 56px;
    // box-sizing: border-box;
    // margin-top: 16px;
  }
  .answerList:hover {
    background: #f5f5fa;
  }
  .answerActive {
    background: #0f63ed;
    color: #fff;
  }
  .knowledgePoint {
    height: 30px;
    padding: 0px 12px;
    box-sizing: border-box;
    line-height: 26px;
    background: #0f63ed;
    border-radius: 20px;
  }
  .fillAnswer {
    margin-top: 20px;
    margin-bottom: 12px;
  }
  .questionsAnswer {
    height: 212px;
    margin-top: 24px;
    margin-bottom: 12px;
    :deep(.el-textarea__inner) {
      height: 100% !important;
    }
  }
}
.errNum {
  background: #fc474c;
  color: #fff;
  border-color: #fc474c;
}
.rightNum {
  background: #19b21e;
  color: #fff;
  border-color: #19b21e;
}
.liveStatus {
  width: 52px;
  height: 24px;
  line-height: 24px;
  margin-left: 8px;
  background: linear-gradient(315deg, #0f63ed 0%, #69a1fe 100%);
  border-radius: 2px 2px 2px 2px;
}
.liveOver {
  width: 52px;
  height: 24px;
  line-height: 24px;
  margin-left: 8px;
  background: #e8e8e8;
}
.recordStatus {
  width: 40px;
  height: 24px;
  background: linear-gradient(316deg, #ef7800 0%, #fba738 40%, #ffb765 100%);
  border-radius: 2px 2px 2px 2px;
}
.studentGrade {
  width: 52px;
  height: 24px;
  line-height: 23px;
  border-radius: 2px;
}
.undergraduate {
  background: #e2ecfd;
  color: #0f63ed;
}
.GraduateStudent {
  background: #ece9fc;
  color: #5f49e5;
}
.correctAnswer {
  color: #19b21e;
}
.single-choice {
  border: 1px solid #0f63ed;
  color: #0f63ed;
}
.more-choice {
  border: 1px solid #e37318;
  color: #e37318;
}
.fill-choice {
  border: 1px solid #8f05e5;
  color: #8f05e5;
}
.question-choice {
  border: 1px solid #2ba471;
  color: #2ba471;
}
</style>
